<template>
    <div>
        <el-form inline class="search-form" :model="searchData">
            <el-form-item label="姓名" prop="nickName">
                <el-input v-model="searchData.nickName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-select v-model="searchData.role" class="m-2">
                    <el-option :key="0" label="全部" :value="0" />
                    <el-option
                        v-for="item in roleWithAuthList"
                        :key="item.roleId"
                        :label="item.roleName"
                        :value="item.roleId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch"> 查询 </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="userList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180"></el-table-column>
            <el-table-column prop="nickName" label="姓名"></el-table-column>
            <el-table-column prop="role" label="角色">
                <template #default="scope">
                    <el-tag v-for="item in scope.row.role" :key="item.role" size="small" style="margin-right: 5px">
                        {{ item.roleName }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleEditUser(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <UserEdit
        v-model="editShow"
        :role-with-auth-list="roleWithAuthList"
        :edit-user="editUser"
        @submit-edit="handleSubmitEdit"
    />
</template>
<script lang="ts" setup>
import { getUserList } from '@/api/user';
import { getRoleList } from '@/api/role';
import UserEdit from './components/UserEdit.vue';
import { IUser, IQueryUser, IEditUser, IRoleWithAuth } from '@/types/common';

const searchData = reactive<IQueryUser>({
    nickName: '',
    role: 0
});
// 用户列表
let userList = ref<IUser[]>([]);
// 角色权限列表
let roleWithAuthList = ref<IRoleWithAuth[]>([]);
let editShow = ref(false);
const editUser = reactive<IEditUser>({
    id: 0,
    nickName: '',
    userName: '',
    role: []
});

onMounted(async () => {
    loadRoleList();
    loadData();
});

const onSearch = () => {
    let res: IUser[] = [];
    if (searchData.nickName || searchData.role) {
        if (searchData.nickName) {
            res = userList.value.filter((item) => {
                return item.nickName.indexOf(searchData.nickName) > -1;
            });
        }
        if (searchData.role) {
            res = searchData.nickName ? res : userList.value;
            res = res.filter((item) => {
                return item.role.find((r) => r.role === searchData.role);
            });
        }
    } else {
        res = userList.value;
    }
    userList.value = res;
};
watch([() => searchData.nickName, () => searchData.role], () => {
    if (searchData.nickName === '' || searchData.role === 0) {
        loadData();
    }
});
const loadData = () => {
    getUserList().then((res) => {
        userList.value = res.data;
    });
};
const loadRoleList = () => {
    getRoleList().then((res) => {
        roleWithAuthList.value = res.data;
        return Promise.resolve();
    });
};
// 编辑
const handleEditUser = (row: IUser) => {
    editShow.value = true;
    Object.assign(editUser, {
        ...row,
        role: row.role.map((item) => item.role)
    });
};
// 保存编辑
const handleSubmitEdit = (editUser: IUser) => {
    editShow.value = false;
    let obj: IUser = userList.value.find((item) => item.id === editUser.id)!;
    obj.nickName = editUser.nickName;
    obj.role = [];
    roleWithAuthList.value.forEach((item) => {
        if (editUser.role.find((value) => value === item.roleId)) {
            obj.role.push({
                role: item.roleId,
                roleName: item.roleName
            });
        }
    });
};
</script>
<style scoped lang="less">
.search-form {
    padding: 10px 0 0 10px;
}

.w192 {
    width: 192px;
}

.m-2 {
    width: 190px;
}
</style>
